<style scoped>
.page_wrap{
  position:absolute;
  top:0;
  width: 100%;
  height: calc(100vh);
  background-image: url('../assets/img/login.jpg');
    /* 不能复制css */
  -moz-user-select:none; /* Firefox私有属性 */
  -webkit-user-select:none; /* WebKit内核私有属性 */
  -ms-user-select:none; /* IE私有属性(IE10及以后) */
  -khtml-user-select:none; /* KHTML内核私有属性 */
  -o-user-select:none; /* Opera私有属性 */
  user-select:none; /* CSS3属性 */
}
.top_warp {
  display: flex;
  height: 50px;
  /* background-color: #282b33; */
  background-color: #323639;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  -webkit-app-region: drag;
}

.left_wrap {
  width: 200px;
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  /* padding: 10px; */
  /* padding-top: 10px; */
  background-color: #F4F5F7;
  border-right: 1px solid rgb(219, 221, 226);
  overflow-y: auto;
  /* box-shadow: 1px 0px 2px 0 #0000001a; */
  /* -webkit-box-shadow: 1px 0px 6px 0 #0000001a; */
  z-index: 200;
  overflow-x: hidden;
}
.right_wrap {
  background-color: #fff;
  position: relative;
  margin-left: 180px;
  top: 50px;
}
.logo {
  font-size: 16px;
  /* font-weight: 600; */
  color: #fff;
  /* margin-left: 20px; */
  width: 600px;
  display: flex;
  align-items: center;
}
.copyright{
  text-align: center;
  font-size: 12px;
  position:fixed;
  bottom: 0;
  width:100%;
  height:50px;
  color:#777777;
}
.login_content_content{
  width: 900px;
  height: 400px;
  margin: 170px auto;
  /* border:1px solid #000; */
  display: flex;
}
.login_left{
  width: 550px;
  /* background-image: url('../assets/img/login_banner.svg'); */
}
.login_right{
  background-color: #fff;
  width:280px;
  padding:30px;
}
.copyright{
  text-align: center;
  font-size: 12px;
  position:fixed;
  bottom: 0;
  width:100%;
  height:50px;
  color:#777777;
}
.top_tools{
  display: flex;
  justify-content: center;
  margin-right:20px;
  color:#fff;
  height:26px;
}
.top_tools_menu{
  /* color:#707681; */
  color:#F1F1F1;
  margin-left:15px;
  padding:5px;
  border-radius: 2px;
  cursor: pointer;
  -webkit-app-region: no-drag;
  font-size:16px;
  justify-content: center;
  height:18px;
}
.top_tools_menu:hover{
    /* background-color: #D6D7D9; */
    background-color: #191B1C;
}
</style>
<template>
  <div class="page_wrap">
    <div class="top_warp">
      <div style="display: flex;align-items: center;">
          <iconpark-icon name="application-one" style="color:#fff;font-size:22px;font-weight:600;margin-left:20px;padding-top:3px;"></iconpark-icon>
          <div style="margin-left:5px;color:#fff;display:flex;align-items: center;">
            <img src="../assets/img/logo.png" style="width:60px;margin-left:0px;" />
            <span style="margin-left:5px;font-size:10px;">管理控制台</span>
            <span style="margin-left:5px;">v1.0</span>
          </div>
      </div>
      <div class="top_tools">
       
      </div>
    </div>
    <div class="login_content_content">
      <div class="login_left">
        <img alt="Vue logo" src="../assets/img/login_bg.png" style="width:550px;height:400px;">
        <!-- <svg-icon style="width:550px;height:400px;" icon-class="login_banner" class-name="icon-size"></svg-icon> -->
      </div>
      <div class="login_right">
        <!-- <div style="display: flex;align-items: center;">
          <iconpark-icon name="application-one" style="color:#323639;font-size:24px;font-weight:600;margin-left:20px;padding-top:3px;"></iconpark-icon>
          <img src="../assets/img/logo.png" style="width:80px;margin-left:0px;" />
        </div> -->
        <div style="font-size: 24px;padding:24px;text-align: center;">账号登录</div>
        <div>
          <el-form
            ref="ruleFormRef"
            :model="dataForm"
            :rules="rules"
            label-width="0px"
            class="demo-ruleForm"
            status-icon
          >
            <el-form-item prop="username">
              <el-input clearable class="input-border-style" v-model="dataForm.username" style="height:40px;" placeholder="用户名">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input clearable class="input-border-style" type="password" v-model="dataForm.password" style="height:40px;" placeholder="密码">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="width:100%;height:38px;" type="primary" v-on:click="login('ruleFormRef')">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="copyright">
      Copyright © 2023 heckman.cn All Rights Reserved 
      <!-- <br/> Power by Go & VUE -->
    </div>
  </div>
</template>
<script>
import {getUUID} from '../utils'
export default {
    name:"login",
    data(){
        return{
          captchaPath:'',
          dataForm:{
            username:'',
            password:'',
          },
          rules:{
            username: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
            ],
            captcha: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
            ],
          },
        }
    },
    created() {
      this.getCaptcha()
    },
    methods:{
      login(formName){
        this.$refs[formName].validate((valid) => {
          if (!valid) {
            return false;
          }else{
            this.$http.post('/api2/login', this.dataForm).then(({
                data: res
            }) => {
                if (res.code !== 0) {
                    this.getCaptcha()
                    return this.$message.error(res.msg)
                }
                localStorage.setItem('token',res.data)
                this.$router.push('/home')
            }).catch(() => {})
          }
        })
      },
      getCaptcha(){
        this.dataForm.uuid = getUUID()
        this.captchaPath = `${window.APIURL}/captcha?uuid=${this.dataForm.uuid}`
      }
    }
}
</script>
